<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的IP</title>
    <link rel="stylesheet" href="components/message_ui.css">
    <style>
        table {
            border-collapse: collapse;
            width: 90%;
            margin-left: 5%;
            height: 300px;
            border-radius: 10%;
        }

        tr {
            border-bottom: 1px solid #bdbdbd;
            height: 30px;
        }

        tr td {
            width: 24%;
        }

        .cont {
            border: 1px solid #bdbdbd;
            width: 80%;
            margin-left: 10%;
            border-radius: .25rem;
            box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
        }

        .ip {
            width: 20%;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
        }

        .ip span {
            margin-left: 5px;
        }

        .lab {
            padding-left: 15px;
            font-size: large;
            font-weight: 400;
            width: 10%;
        }

        .lab {
            color: #000000;
        }

        .des {
            color: cadetblue;
        }

        .copy {
            background-image: url('assets/copy.svg');
            background-repeat: no-repeat;
            padding-left: 20px;
            cursor: pointer;
        }

        .speed_test_cont {
            margin-top: 20px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            align-items: stretch;
            flex-wrap: wrap;
        }

        .stc_item {
            flex-basis: calc(100% / 5);
            border: 1px solid #e4e4e4;
            box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
            margin-bottom: 1.2rem;
        }

        .st_title {
            width: 100%;
            text-align: center;
            font-size: 1.25rem;
            font-weight: 400;
        }

        .st_des {
            width: 100%;
            text-align: center;
            font-size: 0.85rem;
            color: #a2a2a2;
        }

        .st_time {
            width: 100%;
            text-align: center;
            font-size: 1.10rem;
            color: #009800cc;
        }

        .speed_test_cont hr {
            width: 80%;
        }

        .dns_info_cont {
            margin-top: 10px;
            height: 10rem;
        }

        .dic_title {
            width: 20%;
            font-weight: 500;
            color: darkcyan;
        }
        .dic_ip {
            width: 30%;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
        }
        .dic_geo {
            width: 50%;
            color: #6b7280;
        }

        @media (prefers-color-scheme: dark) {
            .ip {
                color: #c6c6c6;
            }
            .lab {
                color: #7d7d7d;
            }
            #loc {
                color: #7d7d7d;
            }
            .st_title {
                color: #40a7b1;
            }
            .dic_ip {
                color: #c6c6c6;
            }
            .dic_geo {
                color: #7d7d7d;
            }
        }

    </style>
</head>
<body>
<div class="cont">
    <table>
        <tbody>
        <tr>
            <td class="lab">内网</td>
            <td class="ip">
                <span id="lanIpv4">0.0.0.0</span>&nbsp;
                <span class="copy" onclick="copyLan()" title="复制"></span></td>
            <td class="des">已复制到剪贴板</td>
            <td></td>
        </tr>
        <tr>
            <td class="lab">公网</td>
            <td class="ip">
                <span id="ip_1">0.0.0.0</span>&nbsp;
                <span class="copy" onclick="copyIp1()" title="复制"></span>
            </td>
            <td class="des"><span id="address1"></span></td>
            <td class="des"><span id="net_str1"></span></td>
        </tr>
        <tr>
            <td class="lab">代理</td>
            <td class="ip">
                <span id="ip_2">0.0.0.0</span>&nbsp;
                <span class="copy" onclick="copyIp2()" title="复制"></span>
            </td>
            <td class="des"><span id="address2"></span></td>
            <td class="des"><span id="net_str2"></span></td>
        </tr>
        <tr style="border: none">
            <td class="lab">位置</td>
            <td id="loc" colspan="2">定位中...</td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

<div class="cont" style="margin-top: 15px">
    <div class="speed_test_cont" id="speed_test_cont"></div>
</div>

<div class="cont" style="margin-top: 15px">
    <table class="dns_info_cont" id="dns_info_cont">

    </table>
</div>



<div class="parent-tips" style="display: block; z-index: 1113;">
    <div class="global-msg-tips info">
    </div>
</div>
</body>

<script type="text/javascript">

    utools.onPluginEnter(({code, type, payload}) => {

        // 获取内网地址
        window.lanIPv4((ip) => {
            document.getElementById("lanIpv4").innerText = ip;
            utools.copyText(ip);
        });

        // 获取地理信息
        window.locationInfo((address) => {
            document.getElementById("loc").innerText = address;
        }, function (error) {
            console.error(error);
        });

        // 获取外网地址1
        window.wan_no_proxy((data) => {
            document.getElementById("ip_1").innerText = data.ip;
            document.getElementById("address1").innerText = data.addr;
            document.getElementById("net_str1").innerText = data.net_str;
        }, function (error) {
            document.getElementById("ip_1").innerText = error;
            console.error(error);
        });

        // 获取外网地址2
        window.wan_has_proxy((data) => {
            document.getElementById("ip_2").innerText = data.ip;
            document.getElementById("address2").innerText = data.addr;
            document.getElementById("net_str2").innerText = data.net_str;
        }, function (error) {
            document.getElementById("ip_2").innerText = error;
            console.error(error);
        });

        // 开始测速组件
        let array = [{
            url: "https://www.baidu.com",
            name: "百度搜索",
            des: "境内网站",
            id: "1"
        }, {
            url: "https://music.163.com",
            name: "网易云",
            des: "境内网站",
            id: "2"
        }, {
            url: "https://github.com",
            name: "GitHub",
            des: "境外网站",
            id: "3"
        }, {
            url: "https://google.com",
            name: "Google",
            des: "境外网站",
            id: "4"
        }, {
            url: "https://www.aliyun.com",
            name: "阿里云",
            des: "境内网站",
            id: "5"
        }, {
            url: "https://cloud.tencent.com",
            name: "腾讯云",
            des: "境内网站",
            id: "6"
        }, {
            url: "https://youtube.com",
            name: "Youtube",
            des: "境外网站",
            id: "7"
        }, {
            url: "https://www.amazon.com",
            name: "亚马逊",
            des: "境外网站",
            id: "8"
        }
        ];
        testNetDelay(array);

        // DNS出口查询
        dnsExitQuery();
    })

    function copyLan() {
        utools.copyText(document.getElementById("lanIpv4").innerText)
        confetti();
    }

    function copyIp1() {
        utools.copyText(document.getElementById("ip_1").innerText)
        confetti();
    }

    function copyIp2() {
        utools.copyText(document.getElementById("ip_2").innerText)
        confetti();
    }

    // 测延迟
    function testNetDelay(array) {
        document.getElementById("speed_test_cont").innerHTML = "";
        // 创建dom
        array.forEach(e => {
            // 创建div元素
            let div = document.createElement("div");
            div.classList.add("stc_item");

            let pTitle = document.createElement("p");
            pTitle.classList.add("st_title");
            pTitle.innerText = e.name;

            let pDes = document.createElement("p");
            pDes.classList.add("st_des");
            pDes.innerText = e.des;

            let hr = document.createElement("hr");

            let pTime = document.createElement("p");
            pTime.innerText = "测速中...";
            pTime.classList.add("st_time");
            pTime.id = "st_time_item_" + e.id;

            div.appendChild(pTitle);
            div.appendChild(pDes);
            div.appendChild(hr);
            div.appendChild(pTime);
            document.getElementById("speed_test_cont").appendChild(div);
        });
        let startTime = new Date().getTime();
        array.forEach(function (element) {
            fetch(element.url).then(r => {
                let endTime = new Date().getTime();
                let latency = endTime - startTime;
                if (latency > 1000) {
                    document.getElementById("st_time_item_" + element.id).style.color = "origin";
                }
                if (latency > 3000) {
                    document.getElementById("st_time_item_" + element.id).style.color = "yellow";
                }
                if (latency > 7000) {
                    document.getElementById("st_time_item_" + element.id).style.color = "red";
                }
                document.getElementById("st_time_item_" + element.id).innerText = latency + "ms"
            }).catch(function (error) {
                document.getElementById("st_time_item_" + element.id).innerText = "❌";
                document.getElementById("st_time_item_" + element.id).style.color = "red";
                console.error(error);
            });
        });
    }

    // DNS出口查询
    function dnsExitQuery(){
        document.getElementById("dns_info_cont").innerHTML = "";
        for (let i = 0; i < 4; i++) {

            fetch("https://"+generateRandomString(32)+".edns.ip-api.com/json?lang=zh-CN").then(response =>  {
                console.log(response);
                response.json().then((res) => {
                    let tr = document.createElement("tr");
                    let td1 = document.createElement("td");
                    td1.className = "dic_title";
                    td1.textContent = "DNS out";

                    let td2 = document.createElement("td");
                    td2.className = "dic_ip";
                    td2.textContent = res.dns.ip;

                    let td3 = document.createElement("td");
                    td3.className = "dic_geo";
                    td3.textContent = res.dns.geo;

                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);

                    document.getElementById("dns_info_cont").appendChild(tr);
                }).catch(e => {
                    console.error(e);
                });
            }).catch(error => {
                console.error(error);
            });
        }

        function generateRandomString(length) {
            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';

            for (let i = 0; i < length; i++) {
                let randomIndex = Math.floor(Math.random() * characters.length);
                result += characters.charAt(randomIndex);
            }

            return result;
        }
    }
</script>
<!--showToast("复制成功", "success")-->
<!--<script type="application/javascript" src="components/message_ui.js"></script>-->
</html>